<template>
    <div class="grid grid-cols-[auto_1fr] h-screen overflow-hidden">

        <div class="min-w-fit">
            <!-- Sidebar backdrop (mobile only) -->
            <div class="fixed inset-0 z-40 transition-opacity duration-200 bg-gray-900/30 lg:hidden lg:z-auto"
                :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>

            <!-- Sidebar -->
            <div id="sidebar" ref="sidebar"
                class="flex lg:flex! flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:w-64! shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out"
                :class="[variant === 'v2' ? 'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-xs', sidebarOpen ? 'translate-x-0' : '-translate-x-64']">

                <!-- Sidebar header -->
                <div class="flex justify-between pr-3 mb-10 sm:px-2">
                    <!-- Close button -->
                    <button ref="trigger" class="text-gray-500 lg:hidden hover:text-gray-400"
                        @click.stop="toggleSidebar" aria-controls="sidebar" :aria-expanded="sidebarOpen">
                        <span class="sr-only">Close sidebar</span>
                        <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
                        </svg>
                    </button>
                    <!-- Logo -->
                    <router-link class="block" to="/">
                        <svg class="fill-violet-500" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                            <path
                                d="M31.956 14.8C31.372 6.92 25.08.628 17.2.044V5.76a9.04 9.04 0 0 0 9.04 9.04h5.716ZM14.8 26.24v5.716C6.92 31.372.63 25.08.044 17.2H5.76a9.04 9.04 0 0 1 9.04 9.04Zm11.44-9.04h5.716c-.584 7.88-6.876 14.172-14.756 14.756V26.24a9.04 9.04 0 0 1 9.04-9.04ZM.044 14.8C.63 6.92 6.92.628 14.8.044V5.76a9.04 9.04 0 0 1-9.04 9.04H.044Z" />
                        </svg>
                    </router-link>
                </div>

                <!-- Links -->
                <div class="space-y-8">
                    <!-- Pages group -->
                    <div>
                        <h3 class="pl-3 text-xs font-semibold text-gray-400 uppercase dark:text-gray-500">
                            <span class="hidden w-6 text-center lg:block lg:sidebar-expanded:hidden 2xl:hidden"
                                aria-hidden="true">•••</span>
                            <span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Pages</span>
                        </h3>
                        <ul class="mt-3">
                            <div v-for="item in menuItems" :key="item.title">
                                <!-- 处理分组菜单 -->
                                <SidebarLinkGroup v-if="item.children" v-slot="parentLink"
                                    :active-condition="isGroupActive(item)">
                                    <a class="block text-gray-800 truncate transition dark:text-gray-100"
                                        :class="isGroupActive(item) ? '' : 'hover:text-gray-900 dark:hover:text-white'"
                                        href="#0" @click.prevent="parentLink.handleClick(); sidebarExpanded = true">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <svg class="fill-current shrink-0"
                                                    :class="isGroupActive(item) ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'"
                                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    viewBox="0 0 16 16">
                                                    <!-- <component :is="getIconComponent(item.icon)" /> -->
                                                </svg>
                                                <span
                                                    class="ml-4 text-sm font-medium duration-200 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100">
                                                    {{ item.title }}
                                                </span>
                                            </div>
                                            <div class="flex ml-2 shrink-0">
                                                <svg class="w-3 h-3 ml-1 text-gray-400 fill-current shrink-0 dark:text-gray-500"
                                                    :class="parentLink.expanded && 'rotate-180'" viewBox="0 0 12 12">
                                                    <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                                                </svg>
                                            </div>
                                        </div>
                                    </a>
                                    <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
                                        <ul class="pl-8 mt-1" :class="!parentLink.expanded && 'hidden'">
                                            <li v-for="child in item.children" :key="child.title"
                                                class="mb-1 last:mb-0">
                                                <router-link :to="child.path" custom
                                                    v-slot="{ href, navigate, isExactActive }">
                                                    <a class="block truncate transition"
                                                        :class="isExactActive ? 'text-violet-500' : 'text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
                                                        :href="href" @click="navigate">
                                                        <span
                                                            class="text-sm font-medium duration-200 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100">
                                                            {{ child.title }}
                                                        </span>
                                                    </a>
                                                </router-link>
                                            </li>
                                        </ul>
                                    </div>
                                </SidebarLinkGroup>

                                <!-- 处理单个菜单项 -->
                                <router-link v-else :to="item.path" custom v-slot="{ href, navigate, isExactActive }">
                                    <li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r"
                                        :class="isExactActive && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'">
                                        <a class="block text-gray-800 truncate transition dark:text-gray-100"
                                            :class="isExactActive ? '' : 'hover:text-gray-900 dark:hover:text-white'"
                                            :href="href" @click="navigate">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center grow">
                                                    <svg class="fill-current shrink-0"
                                                        :class="isExactActive ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'"
                                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        viewBox="0 0 16 16">
                                                        <!-- <component :is="getIconComponent(item.icon)" /> -->
                                                    </svg>
                                                    <span
                                                        class="ml-4 text-sm font-medium duration-200 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100">
                                                        {{ item.title }}
                                                    </span>
                                                </div>
                                                <div v-if="item.badge" class="flex ml-2 shrink-0">
                                                    <span
                                                        class="inline-flex items-center justify-center h-5 px-2 text-xs font-medium text-white rounded-sm bg-violet-400">
                                                        {{ item.badge }}
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </router-link>

                            </div>
                        </ul>
                    </div>
                </div>

                <!-- Expand / collapse button -->
                <div class="justify-end hidden pt-3 mt-auto lg:inline-flex 2xl:hidden">
                    <div class="w-12 py-2 pl-4 pr-3">
                        <button class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
                            @click.stop="toggleSidebarExpanded">
                            <span class="sr-only">Expand / collapse sidebar</span>
                            <svg class="text-gray-400 fill-current shrink-0 dark:text-gray-500 sidebar-expanded:rotate-180"
                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                <path
                                    d="M15 16a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v14a1 1 0 0 1-1 1ZM8.586 7H1a1 1 0 1 0 0 2h7.586l-2.793 2.793a1 1 0 1 0 1.414 1.414l4.5-4.5A.997.997 0 0 0 12 8.01M11.924 7.617a.997.997 0 0 0-.217-.324l-4.5-4.5a1 1 0 0 0-1.414 1.414L8.586 7M12 7.99a.996.996 0 0 0-.076-.373Z" />
                            </svg>
                        </button>
                    </div>
                </div>

            </div>

        </div>

        <!-- 主内容区域 -->
        <div class="flex-1 overflow-y-auto overflow-x-hidden transition-all duration-200 ease-in-out">
            <!-- Site header -->
            <Header :sidebarOpen="sidebarOpen" @toggle-sidebar="sidebarOpen = !sidebarOpen" variant="v2" />

            <!-- px-4: 水平内边距, sm:px-6 lg:px-8: 响应式水平内边距 -->
            <div class="px-4 sm:px-6 lg:px-8">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import SidebarLinkGroup from '../partials/SidebarLinkGroup.vue'
import Header from '../partials/Header.vue'
import { defineComponent, h } from 'vue'; // 导入 defineComponent 和 h 函数

const sidebarOpen = ref(true)
const sidebarExpanded = ref(true)
const variant = 'v2'

// 定义 emit 事件
const emit = defineEmits(['close-sidebar'])

// 定义 refs
const trigger = ref<HTMLElement | null>(null)
const sidebar = ref<HTMLElement | null>(null)

// 切换 sidebar 状态
const toggleSidebar = () => {
    sidebarOpen.value = !sidebarOpen.value
}

// 切换 sidebarExpanded 状态
const toggleSidebarExpanded = () => {
    sidebarExpanded.value = !sidebarExpanded.value
}

// 监听 sidebarExpanded 的变化，更新 body 的类名
watch(sidebarExpanded, (newVal) => {
    const body = document.querySelector('body')
    if (newVal) {
        body?.classList.add('sidebar-expanded')
    } else {
        body?.classList.remove('sidebar-expanded')
    }
})

// 组件挂载时初始化 body 的类名
onMounted(() => {
    if (sidebarExpanded.value) {
        document.querySelector('body')?.classList.add('sidebar-expanded')
    }
})

// 组件卸载时清理 body 的类名
onUnmounted(() => {
    document.querySelector('body')?.classList.remove('sidebar-expanded')
})


const isGroupActive = (item: any) => {
    const currentRoute = useRouter().currentRoute.value;
    if (item.children) {
        return item.children.some((child: any) => currentRoute.path === child.path);
    }
    return false;
};


// 获取当前路由
const currentRoute = useRouter().currentRoute.value

// 图标组件定义
const icons = {
    dashboard: {
        paths: [
            'M5.936.278A7.983 7.983 0 0 1 8 0a8 8 0 1 1-8 8c0-.722.104-1.413.278-2.064a1 1 0 1 1 1.932.516A5.99 5.99 0 0 0 2 8a6 6 0 1 0 6-6c-.53 0-1.045.076-1.548.21A1 1 0 1 1 5.936.278Z',
            'M6.068 7.482A2.003 2.003 0 0 0 8 10a2 2 0 1 0-.518-3.932L3.707 2.293a1 1 0 0 0-1.414 1.414l3.775 3.775Z'
        ]
    },
    ecommerce: {
        paths: ['M9 6.855A3.502 3.502 0 0 0 8 0a3.5 3.5 0 0 0-1 6.855v1.656L5.534 9.65a3.5 3.5 0 1 0 1.229 1.578L8 10.267l1.238.962a3.5 3.5 0 1 0 1.229-1.578L9 8.511V6.855ZM6.5 3.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm4.803 8.095c.005-.005.01-.01.013-.016l.012-.016a1.5 1.5 0 1 1-.025.032ZM3.5 11c.474 0 .897.22 1.171.563l.013.016.013.017A1.5 1.5 0 1 1 3.5 11Z']
    },
    messages: {
        paths: [
            'M13.95.879a3 3 0 0 0-4.243 0L1.293 9.293a1 1 0 0 0-.274.51l-1 5a1 1 0 0 0 1.177 1.177l5-1a1 1 0 0 0 .511-.273l8.414-8.414a3 3 0 0 0 0-4.242L13.95.879ZM11.12 2.293a1 1 0 0 1 1.414 0l1.172 1.172a1 1 0 0 1 0 1.414l-8.2 8.2-3.232.646.646-3.232 8.2-8.2Z',
            'M10 14a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Z'
        ]
    },
    reminder: {
        paths: [
            'M6.753 2.659a1 1 0 0 0-1.506-1.317L2.451 4.537l-.744-.744A1 1 0 1 0 .293 5.207l1.5 1.5a1 1 0 0 0 1.46-.048l3.5-4ZM6.753 10.659a1 1 0 1 0-1.506-1.317l-2.796 3.195-.744-.744a1 1 0 0 0-1.414 1.414l1.5 1.5a1 1 0 0 0 1.46-.049l3.5-4ZM8 4.5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1ZM9 11.5a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z'
        ]
    },

}

// 根据图标名称获取图标组件
const getIconComponent = (iconName: string) => {
    if (!(iconName in icons)) {
        // throw new Error(`Invalid icon name: ${iconName}`);
        return null
    }
    return defineComponent({
        render() {
            return h('g', icons[iconName as keyof typeof icons].paths.map(path => h('path', { d: path })));
        }
    });
}

// 菜单项定义
const menuItems = [
    {
        title: 'Dashboard',
        icon: 'dashboard',
        activePath: 'dashboard',
        children: [
            { title: 'Main', path: '/' },
            { title: 'Analytics', path: '/dashboard/analytics' },
            { title: 'Fintech', path: '/dashboard/fintech' }
        ]
    },
    {
        title: 'E-Commerce',
        icon: 'ecommerce',
        activePath: 'ecommerce',
        children: [
            { title: 'Customers', path: '/ecommerce/customers' },
        ]
    },
    {
        title: 'Messages',
        icon: 'messages',
        path: '/messages',
        badge: 4
    },
    {
        title: 'Reminder',
        icon: 'reminder',
        path: '/reminder',
    }
]
</script>
